import ReactMarkdown from 'react-markdown';
import { Avatar, Spin } from 'antd'
import React from 'react';
import './index.less'

const contentStyle: React.CSSProperties = {
  padding: 20,
  background: 'rgba(0, 0, 0, 0.05)',
  borderRadius: 4,
};

const content = <div style={contentStyle} />;

export const Loading: React.FC = () => (
  <Spin size='small'>{content}</Spin>
);
type ContentBlockProps = {
  status: string,
  content: string
}
function ContentBlock(props: ContentBlockProps) {
  if (props.status === 'loading') {
    return <Loading />
  } else {
    return <ReactMarkdown>{props.content}</ReactMarkdown>
  }
}

export type ChatItemProps = {
  content: string
  role: string,
  status?: 'loading' | 'success' | 'error'
}

function ChatItem(props: ChatItemProps) {
  let messageStatus = 'success'
  if (props.status) {
    messageStatus = props.status
  }
  if (props.role === 'assistant' || props.role === 'system') {
    return (
      <div className='chat-chat-item-message chat-item-left'>
        <div>
          <Avatar style={{ backgroundColor: '#7265e6', verticalAlign: 'middle' }}>
            {props.role}
          </Avatar>
        </div>
        <div className='chat-chat-item'>
          {/* <MarkdownRender >
            {props.content}
          </MarkdownRender> */}
          <ContentBlock status={messageStatus} content={props.content} />
        </div>
      </div>
    )
  } else if (props.role === 'user') {
    return (
      <div className='chat-chat-item-message  chat-item-right'>
        <div className='chat-chat-item'>
          <ReactMarkdown>
            {props.content}
          </ReactMarkdown>
        </div>
        <div>
          <Avatar style={{ backgroundColor: '#ffbf00', verticalAlign: 'middle' }}>
            {props.role}
          </Avatar>
        </div>
      </div >
    )
  } else {
    return (
      <div className='chat-chat-item-messag'>
        <div className='chat-chat-item'>
          <ReactMarkdown>
            {props.content}
          </ReactMarkdown>
        </div>
      </div>
    )
  }
}
export default ChatItem
